<template>
  <div>
    <el-tree
      ref="tree"
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
    >
      <template #default="{ node }">
        <!-- 只能有一个根元素 -->
        <!-- <div> -->
        <!-- 不能渲染嵌套数据=》报错 -->
        <!-- <span>{{ node.label }}</span> -->
        <p style="color: red; border: 1px solid red">{{ node.label + "1" }}</p>
        <!-- </div> -->
      </template>
    </el-tree>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: [{
        label: '总裁办',
        children: [{
          label: '秘书处',
          children: [{
            label: '一秘'
          }]
        }]
      }, {
        label: '研发部',
        children: [{
          label: '前端',
          children: [{
            label: 'UI'
          }]
        }, {
          label: '后端',
        }]
      },],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick (data) {
      console.log(data)
    }
  }
};
</script>

<style lang="less" scoped>
</style>